<template>
	<div class="Header">
		<div class="header">
			<div class="header-c">
				<div class="logo">
					<img src="../../../static/header/logo.png" />
				</div>
				<!--菜单栏-->
				<div class="menunav">
					<div class="menu-cell" v-for="(item,index) in menudata" @click.stop="menuClick(item,index)">
						<div class="cell-bline" :class="blineFlag === index?'active':''">
							<div class="title-menu">{{name===''?item.text:name}}</div>
							<div class="iconfont icon-menu icontubiaozhizuo-1"></div>
						</div>
						<div class="menu-content" v-if="showFlag === index" >
							<div class="content-cell" v-for="(items, i) in item.children">
								<div class="cell" @click.stop="SonmenuClick(item,items,i)">
									<div class="img">
										<img  
											:src="items.attributes.icon === ''||items.attributes.icon === '/common/dict'?'../../../static/header/menu/position.png':items.attributes.icon"/>
									</div>
									<div class="name">{{items.text}}</div>
								</div>
							</div>
							<div class="iconfont close-menu iconclose" @click.stop="closeClick()"></div>
						</div>
					</div>
				</div>
				<!--搜索栏-->
				<div class="sreach">
					<div class="inputtitle">
						<input placeholder="找人、文件、会议" />
					</div>
					<div class="iconfont btn iconsousuo"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Bus from '@/common/config/bus'
import {menulist} from '@/service/header'
export default {
	name: 'Header',
  	data () {
	    return {
	      menudata:[],
	      showFlag:-1,
	      blineFlag:0,
	      sonFlag:-1,
	      name:'',
	    }
  	},
  	created(){
  		this.loadmenulist()
  		const that = this
		Bus.$on('headerline',function(data){
	  		console.log(data)
	  		that.blineFlag = data.type
//	  		that.name = data.name
		})
  	},
  	methods:{
  		loadmenulist(){
  			const that = this
  			const loading = this.$loading({
	          lock: true,
	          text: 'Loading',
	          spinner: 'el-icon-loading',
	          background: 'rgba(0, 0, 0, 0.7)'
	       });
  			menulist().then(res =>{
  				loading.close();
  				that.menudata = res.data.data
  			})
  			.catch(res => {
  				console.log(res)
            	that.$message.error(res);
          	});
  		},
  		menuClick(item,index){
  			if(this.showFlag === index){
  				this.showFlag = -1
  			}else{
  				this.showFlag = index
  				this.blineFlag = index
  			}
  		},
  		SonmenuClick(it,its,i){
  			console.log(its)
  			it.text = its.text
  			this.showFlag = -1
  			console.log(its)	
  			if(its.hasChildren){
  				//菜单是否包含列表
  				Bus.$emit('menu',its.children)
  				this.$router.push({path:its.attributes.url})
  			}else{
  				Bus.$emit('nomenu',-1)
  				this.$router.push({path:its.attributes.url})
  			}
  			
  			
  		},
  		closeClick(){
  			this.showFlag = -1
  		}
  	}
}
</script>

<style scoped lang="scss">
	.header{
		position: absolute;
		top: 0;
		height: 50px;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 9;
		background-color: #409EFF;
	}
	.header-c{
		width: 100%;
		height: 50px;
		display: inline-flex;
		align-items: center;
	}
	.logo{
		width: 250px;
		text-align: center;
	}
	.logo img{
		margin-top: 3px;
		width: 60%;
	}
	/*菜单*/
	.menunav{
		width: 60%;
		display: inline-flex;
		align-items: center;
		height: 100%;
	}
	.menu-cell{
		position: relative;
		font-family: "微软雅黑";
		font-size: 14px;
		font-weight: bold;
		color: white;
		height: 100%;
		display: inline-flex;
		align-items: center;
		margin-left: 30px;
		cursor: pointer;
	}
	.cell-bline{
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 3px solid rgba(0,0,0,0);
	}
	.title-menu{
		display: inline-block;
		
	}
	.icon-menu{
		margin-left: 5px;
		display: inline-block;
	}
	.menu-content{
		position: absolute;
		top: 100%;
		width: 400px;
		padding: 20px;
		padding-top: 10px;
		background-color: white;
		display: inline-flex;
		flex-flow: wrap;
		border: 1px solid rgba(0,0,0,0.1);
	}
	.content-cell{
		padding: 10px;
		display: inline-flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		width:25%;
	}
	.cell{
		
	}
	.cell img{
		width: 100%;
	}
	.name{
		width: 100%;
		color: black;
	}
	.active{
		border-bottom: 3px solid #FFFFFF;
	}
	.close-menu{
		position: absolute;
		color: #7F7D7C;
		bottom: 0px;
		right: 0px;
		font-size: 20px;
		
	}
	/*搜索*/
	.sreach{
		width: 25%;
		display: inline-flex;
		align-items: center;
	}
	.inputtitle{
		height: 30px;
		border-radius: 10px;
		width: 200px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		overflow: hidden;
	}
	.inputtitle input{
		width: 100%;
		height: 100%;
		padding-left: 10px;
	}
	.inputtitle input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
		margin-left: 10px;
		padding-left: 10px;
	}
	.inputtitle input::-moz-placeholder { /* Firefox 19+ */  
		margin-left: 10px;
	}
	.inputtitle input:-ms-input-placeholder { /* IE 10+ */ 
		margin-left: 10px;
	}
	.inputtitle input:-moz-placeholder { /* Firefox 18- */ 
		margin-left: 10px;
	}
	.btn{
		width: 50px;
		height: 30px;
		line-height: 30px;
		background-color: rgba(0,0,0,0.2);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		color: white;
		font-size: 22px;
	}
	
</style>